<template>
  <header>{{ headerText }}</header>
  <div class="page-viewer">
    <RouterView />
  </div>
  <nav>
    <RouterLink to="/">待办任务</RouterLink>
    <RouterLink to="/note">记事本</RouterLink>
    <RouterLink to="/handout">任务分发</RouterLink>
  </nav>
  <el-dialog
    v-model="userDialogVisible"
    title="请输入您的姓名"
    style="max-width: 500px"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form>
      <el-input v-model="name" />
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmName()">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { getUserByName } from '@/api/api'
import { ElMessage } from 'element-plus'

let userId = localStorage.getItem('userId')
const fisrtLogin = userId == null

const userDialogVisible = ref(fisrtLogin)
const name = ref(localStorage.getItem('userName'))

// 切换用户
const confirmName = async () => {
  if (name.value == localStorage.getItem('userName')) {
    userDialogVisible.value = false
    return
  }
  const res = await getUserByName({ params: { name: name.value } })
  if (res.status) return ElMessage.warning(res.msg)
  userId = res.data.id
  localStorage.setItem('userId', userId)
  localStorage.setItem('userName', name.value)
  userDialogVisible.value = false
  location.reload()
}

const headerText = computed(() => (name.value ? name.value + '，欢迎您' : '请登录'))
</script>
<style scoped>
header {
  text-align: center;
  /* background: #93def5; */
  background: #d8bcff;
  height: 65px;
  color: white;
  position: relative;
  padding-top: 5px;
  font-size: 22px;
  line-height: 55px;
}

.page-viewer {
  height: calc(100% - 117px);
  overflow: auto;
  background: #f0f0ff;
}

::-webkit-scrollbar {
  display: none;
}

nav {
  width: 100%;
  height: 52px;
  font-size: 14px;
  text-align: center;
  /* background: #19bdff; */
  background: #c59cfd;
  display: flex;
}

nav a.router-link-exact-active {
  color: #d3f7ff;
  font-size: larger;
  font-weight: bold;
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  flex: 1;
  padding: 1rem 1rem;
  border-left: 1px solid rgb(180 238 231);
  font-size: 16px;
  line-height: 18px;
  color: white;
  font-weight: bold;
}

nav a:first-of-type {
  border: 0;
}
</style>
